<template>
    <div class="listDiv">
        <div class="searchDiv">
                <el-select v-model="obj.req.management_id" placeholder="所属管委会" class="search_select w180px" clearable>
                    <el-option v-for="(item,index) in obj.management_all" :key="index" :label="item.name" :value="item.management_id" />
                </el-select>
                <el-cascader v-model="obj.req.citys" :options="hebeicitys" class="search_select" clearable :props="{checkStrictly:true}" @change="(e)=>{obj.req.city = e?e[e.length-1]:''}" style="width:280px;" />
                <el-select v-model="obj.req.state" placeholder="全部状态" class="search_select" clearable>
                    <el-option v-for="(item,index) in globalData.stateTypeAry" :key="index" :label="item.text" :value="item.value" />
                </el-select>
                <el-input clearable placeholder="匹配名称" v-model="obj.req.key" class="search_key" />
                <span class="btn search" @click="init">搜索</span>
                <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight flex-row-center">
                <a class="mr10 base-color mini-size pointer" target="_blank" href="https://smartgarden.file.zh8848.top/other/园区导入模板.xls" download='园区导入模板.xls' charset="UTF-8">下载模板</a>
                <el-popover placement="bottom" width="400" trigger="click" v-model:visible="obj.visible">
                    <span>请选择管委会：</span><br/>
                    <el-select v-model="obj.upload_management_id" placeholder="选择管委会" class="mt10 mb10" clearable>
                        <el-option v-for="(item,index) in obj.management_all" :key="index" :label="item.name" :value="item.management_id" />
                    </el-select><br/>
                        <div class="flex-row-center">
                            <a class="mr10 base-color mini-size pointer" @click="obj.visible=false">取消</a>
                            <Upfile v-if="obj.upload_management_id" @upload="uploadfile" type="button" :accept="['application/vnd.ms-excel']" />
                        </div>
                    <template #reference>
                        <span class="btn add mr10" @click="obj.visible=true">导入</span>
                    </template>
                </el-popover>
                <span class="btn add" @click="add">添加园区</span>
            </div>
        </div>
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="mw200">园区名称</li>
                <li class="mw200">所属管委会</li>
                <li class="">联系人</li>
                <li class="wcen">联系电话</li>
                <li class="mw200 wcen">添加时间</li>
                <li class="mw150 wcen">正常/停用</li>
                <li class="mw250 wcen">操作</li>
            </ul>
            <div class="body">
                <ul v-for="(x,i) in obj.ary" :key="i">
                    <li class="mw200">
                        <el-tooltip class="box-item" effect="dark" :content="x.name" placement="top-start" :disabled="x.name.length<10">
                            <div class="lineOne pointer">{{x.name}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mw200">
                        <el-tooltip class="box-item" effect="dark" :content="x.managementname" placement="top-start" :disabled="x.managementname.length<10">
                            <div class="lineOne pointer">{{x.managementname}}</div>
                        </el-tooltip>
                    </li>
                    <li class="">{{x.concat}}</li>
                    <li class="wcen">{{x.mobile}}</li>
                    <li class="mw200 wcen">{{x.intime}}</li>
                    <li class="mw150 wcen">
                        <el-switch v-model="x.state" size="small" :validate-event="false" @change="setstate(x)"
                            active-text="" inactive-text=""
                            active-value="1" inactive-value="0">
                        </el-switch>
                    </li>
                    <li class="mw250 wcen">
                        <el-button class="edit_btn" type="success" @click="edit(x)">修改</el-button>
                        <el-button class="edit_btn mr10" type="success"  @click.prevent="staff(x)">操作员</el-button>
                        <DelConfirm class="" @yesClick="del(x)" />
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />

        <el-dialog v-model="obj.drawer.design" :title="obj.drawer.designTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <router-view @close="obj.drawer.design = false" @init="init" />
        </el-dialog>
        <el-dialog v-model="obj.drawer.staff" :title="obj.drawer.staffTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <router-view @close="obj.drawer.staff = false" :garden_id="obj.drawer.garden_id" name="staff" />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    import Upfile from '@/components/upfile_single.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            design: false,
            designTitle: "",
            staff: false,
            staffTitle: "",
            garden_id:0,
        },
        ary: [],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
            management_id: "",
            key: "",
            state:"",
            city: '',
            citys: ['1301','130110'],
        },
        management_all:[],
        visible: false,
        upload_management_id: '',
    });
    let init_befor = async () => {
        obj.management_all = await proxy.$utils.getManagement(proxy)
        console.log(obj.management_all);
    }
    init_befor()
    let init = () => {
        let param = {
            ...obj.req,
            city: obj.req.city?obj.req.city:(obj.req.citys?obj.req.citys[obj.req.citys.length-1]:'')
        }
        console.log(param);
        proxy.$ajax({
            url: '/garden/list',
            data: param,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    const uploadfile = (e)=>{
        // console.log(e);
        const xlsImport = async () =>{
            const list = await proxy.$utils.xlsImport(proxy,e)
            let keys = {'园区名称':'name','地址':'address','负责人':'concat','联系电话':'mobile','介绍':'msg'}
            let updata = []
            let manaObj = obj.management_all.filter(e=> e.management_id == obj.upload_management_id)
            list.map((item,idx)=>{
                if(idx>0){
                    let o = {id:0,name:"",address:"",concat:"",mobile:"",msg:"",city:manaObj[0].city||'',citys:manaObj[0].citys||[],management_id: obj.upload_management_id}
                    Object.keys(item).forEach((key) => {
                        o[keys[key]] = item[key];
                    });
                    updata.push(o)
                }
            })
            // console.log(updata);
            // return
            let noUploads = '';
            for(let i=0;i<updata.length; i++){
                await proxy.$ajax({url: 'garden/design',data: updata[i],bfLoading: true,}).then(d => {
                    console.log(d)
                    if(!d.success){
                        noUploads += (updata[i].name+':'+e.err+'; ');
                    }
                }).catch(e => {
                    console.log(e)
                    noUploads += (updata[i].name+':'+(e||'其他原因')+'; ');
                })
            }
            obj.visible=false
            if(noUploads===''){
                proxy.elMessageMixin("导入成功", 'success')
            }else{
                proxy.elMessageMixin(`导入失败的园区：${noUploads}`, 'error')
            }
            init()
        }
        xlsImport()
    }

    let editId = ref(0)
    provide("id", editId); //不能加.value
    let add = () => {
        obj.drawer.design = true
        obj.drawer.designTitle = "添加园区"
        editId.value = 0;
    }
    let edit = x => {
        obj.drawer.design = true
        obj.drawer.designTitle = "修改园区"
        editId.value = x.garden_id;
    }
    let staff = x => {
        obj.drawer.staff = true
        obj.drawer.staffTitle = `园区操作员管理`
        obj.drawer.garden_id = x.garden_id;
    }

    let setstate = x => {
        proxy.$ajax({
            url: '/garden/setstate',
            data: { id: x.garden_id },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("园区状态变更成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
    let del = x => {
        proxy.$ajax({
            url: '/garden/delete',
            data: { id: x.garden_id },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("删除成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { margin-left: 10px; width:100px; }
    .search_key { width:160px!important; }
    #tb ul li.li1 { min-width: 100px; }
    #tb ul li.li2 { width: 160px; }
    #tb ul li.li3 { width: 125px; }
    #tb ul li.li4 { width: 55px; }
</style>